<template>
  <div class="files-preview">
    <div v-if="previewList && previewList.length > 0">
      <div v-if="blockDisplayArr.length" class="list-view">
        <preview-block-item
          v-for="(fileItem, idx) in blockDisplayArr"
          :key="fileItem.id"
          :file-item="fileItem"
          :show-download="showDownload"
          :show-delete="showDelete"
          @preview="onPreview(fileItem)"
          @download="onDownload(fileItem)"
          @delete="onDelete(idx)"></preview-block-item>
      </div>
      <div v-if="listDisplayArr.length" class="list-view">
        <preview-list-item
          v-for="(fileItem, idx) in listDisplayArr"
          :key="fileItem.id"
          :file-item="fileItem"
          :small-layout="smallLayout"
          :show-download="showDownload"
          :show-delete="showDelete"
          @preview="onPreview(fileItem)"
          @download="onDownload(fileItem)"
          @delete="onDelete(idx)"></preview-list-item>
      </div>
    </div>
    <p class="empty" v-else></p>
    <preview-file-operate ref="fileOperate"></preview-file-operate>
  </div>
</template>

<script>
// import { guid } from '@utility/utility'
import { FILE_PREVIEW_TYPE } from '@utility/dict'
// import { getFilePreviewUrl } from '@api/api.js'
import PreviewBlockItem from './PreviewBlockItem.vue'
import PreviewListItem from './PreviewListItem.vue'

import PreviewFileOperate from './PreviewFileOperate.vue'
import { unifyPreviewData } from './controller'

export default {
  name: 'UploadPreview',
  components: {
    // VideoPreviewDialog,
    PreviewBlockItem,
    PreviewListItem,
    PreviewFileOperate,
  },
  props: {
    fileList: {
      type: Array,
      default() {
        return []
      },
    },
    layout: {
      type: String,
      default: 'auto', // list, block, auto, mixed (auto：只有图片和视频时，为block模式；图文混排时为list模式；mixed: 图片、视频排在前面，展示为block，文档展示为list)
    },
    showDownload: {
      type: Boolean,
      default: true,
    },
    showDelete: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      smallLayout: false,
    }
  },
  computed: {
    showType() {
      if (this.previewList && this.previewList.length) {
        if (this.layout === 'auto') {
          const docItem = this.previewList.find(item => {
            return FILE_PREVIEW_TYPE.doc === item.previewType
          })
          if (docItem) {
            return 'list'
          } else {
            return 'block'
          }
        }
      }
      return this.layout
    },
    previewList() {
      if (this.fileList && this.fileList.length) {
        return this.fileList.map(item => {
          return unifyPreviewData(item)
        })
      }
      return []
    },
    previewImgs() {
      if (this.previewList) {
        return this.previewList.filter(item => item.previewType === FILE_PREVIEW_TYPE.img).map(item => item.previewPath)
      }
      return []
    },
    listDisplayArr() {
      if (this.layout === 'mixed') {
        return this.previewList.filter(item => item.previewType === FILE_PREVIEW_TYPE.doc)
      } else if (this.showType === 'list') {
        return this.previewList
      } else {
        return []
      }
    },
    blockDisplayArr() {
      if (this.layout === 'mixed') {
        return this.previewList.filter(item => item.previewType !== FILE_PREVIEW_TYPE.doc)
      } else if (this.showType === 'block') {
        return this.previewList
      } else {
        return []
      }
    },
  },
  created() {
    window.addEventListener('resize', this.resetSmallLayout)
  },
  mounted() {
    this.resetSmallLayout()
  },
  filters: {},
  methods: {
    resetSmallLayout() {
      const rootWidth = this.$el.clientWidth
      if (rootWidth < 240) {
        this.smallLayout = true
      } else {
        this.smallLayout = false
      }
    },
    inited(viewer) {
      this.$viewer = viewer
    },
    onPreview(item) {
      this.$refs.fileOperate.previewFile(item, this.previewImgs)
    },

    // 下载
    onDownload(fileItem) {
      this.$refs.fileOperate.downloadFile(fileItem)
    },

    onDelete(i) {
      this.$refs.fileOperate.deleteFile(() => {
        // eslint-disable-next-line
        this.fileList.splice(i, 1)
        this.$emit('fileRemove')
      })
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resetSmallLayout)
  },
}
</script>

<style lang="scss" scoped>
.files-preview {
  width: 100%;
  .empty {
    font-size: 14px;
  }

  .list-view {
    display: flex;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
  }
}
</style>
